<template>
	<div>
		<van-cell-group>
			<van-field 
				label="原密码" 
				v-model="password"
				type="password" 
				placeholder="请输入原密码" 
				:error="!!$vuelidation.error('password')"/>
				
			<van-field 
				label="新密码" 
				v-model="new_password" 
				type="password" 
				placeholder="请输入新密码" 
				:error="!!$vuelidation.error('new_password')" />
				
			<van-field 
				label="确认密码" 
				v-model="repeat_password" 
				type="password" 
				placeholder="请再次输入密码" 
				:error="!!$vuelidation.error('repeat_password')" />
		</van-cell-group>
		
		<div class="bottom_btn">
			<van-button size="large" type="danger" @click="modifypassword">保存</van-button>
		</div>
	</div>
</template>


<script>
	import { USER_MODIFY_PASSWORD, USER_LOGOUT } from '@/api/user';
	export default {
		data: () => ({
			password: "",
			new_password: "",
			repeat_password: ""
		}),
		
		vuelidation: {
			data: {
				password: {
					required: true,
					msg(){
						return "请输入密码"
					}
				},
				new_password: {
					alpha: true,
					required: true,
					betweenLength: {
						min: 6,
						max: 12,
					},
					msg(){
						return '请输入正确密码格式, 密码必须大于6位, 小于12位, 且只能包含数字和字母'
					}
				},
				repeat_password: {
					alpha: true,
					required: true,
					betweenLength: {
						min: 6,
						max: 12,
					},
					msg(){
						return '请输入正确密码格式, 密码必须大于6位, 小于12位, 且只能包含数字和字母'
					}
				}
			},
		},
		
		methods: {
			modifypassword(){
				if(this.mixValid() && this.passwordValid()){
					this.$reqPut(USER_MODIFY_PASSWORD, {
						old_password: this.password,
						new_password: this.new_password,
					}).then(res => {
						 return this.$dialog.alert({message: '保存成功, 请重新登录.'})
					}).then(() => {
						return this.$reqGet(USER_LOGOUT)
					}).then(()=>{
						this.$util.removeStorage('Authorization', 'user_id', 'avatar', 'background_image', 'nick_name');
						this.$router.replace({name: "login"});
					})
				}
			},
			passwordValid(){
				if(this.new_password != this.repeat_password){
					this.$toast("密码不一致, 请再次确认密码");
					return false;
				}
				return true;
			},
		}
	}

</script>

<style scoped>
	.bottom_btn{
		padding: 30px 15px 0 15px; 
	}
</style>
